<template>
  <div class="person">
    <h1>汽车信息：汽车的名字为:{{car.name}},价格为:{{car.price}}万</h1>
    <button @click="changePrice">修改汽车价格</button>
  </div>
</template>

<script lang="ts" setup>
import {reactive,toRefs} from "vue";

// let car = reactive({name:'奔驰',price:100})
let car = reactive({
  name:'奔驰',
  price:100
})
let {price} = toRefs(car); //结构对象数据，加上toRefs实际上结构出来的数据为 ref(car.price)


function changePrice(){
  price.value += 10
  console.log(price)
}
</script>

<style>
.person{
  background-color: yellow;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>
